<template>
  <div class="list">


    <el-dropdown :hide-on-click="false">
    <span class="el-dropdown-link" @click="">
      个人中心<el-icon class="el-icon--right"><arrow-down /></el-icon>
    </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>Action 1</el-dropdown-item>
          <el-dropdown-item>Action 2</el-dropdown-item>
          <el-dropdown-item>Action 3</el-dropdown-item>
          <el-dropdown-item disabled>Action 4</el-dropdown-item>
          <el-dropdown-item divided>Action 5</el-dropdown-item>
          <el-dropdown-item divided>Action 6</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>

</template>

<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
</script>

<style scoped>
.example-showcase .el-dropdown + .el-dropdown {
  margin-right: 15px;
}

.list {
  display: flex;
   /* 使下拉菜单靠右 */
  position: relative;
  top: 0px;
  margin-right: 40px;
  justify-content: flex-end;
}


.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>